<template>
	<view class="u-page">
			<view style="margin-bottom: 50rpx;">会议室列表</view>
			<view style="display: inline-flex;align-items: center;font-size: 30rpx;">
				<view>搜索：</view>
				<u--input
						v-model="searchValue"
						placeholder="请输入搜索内容"
						border="none"
						style="width: 400rpx;margin-left: 50rpx;"
				></u--input>
				<u-button @click="searchMeeingButton()"  style="width: 200rpx;background-color: #398ADE;">搜索</u-button>
				
			</view>
			
			
		<view style="display: flex;flex-direction: row;margin: 40rpx 30rpx;height: 60rpx;border-radius: 20rpx;border-bottom: 1px solid #DDDDDD;font-size: 25rpx;width: 800rpx;">
			<view style="margin-left: 60rpx;">会议室名称</view>
			<view  style="margin-left: 230rpx;">房间号</view>
			<view  style="margin-left: 80rpx;">楼栋号</view>
		</view>
		<uni-pagination @change="change" show-icon="true" :total="total" :current="current" :pageSize="pageSize"></uni-pagination>
		
		
		<!-- 表格数据行 -->
		<view v-for="(item,index) in pageList" :key="index" class="meeting" @click="choseMeeting(item.id)">
			<view class="meeting_item"><image src="@/static/tabs/home.png" class="image"></image></view>
			<view class="meeting_item name">{{item.meetingName}}</view>
			<view class="meeting_item room">{{item.room}}</view>
			<view class="meeting_item building">{{item.building}}</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				meeting:'',
				time:'',
				searchValue:'',
				old_meeting:'',
				current: 1,
				total: '',
				pageSize: 10,
				pageList:''
			}
		},
		onLoad(options) {
		    this.meeting = JSON.parse(decodeURIComponent(options.data)).listMeeting
			this.currentChangePage(this.meeting, this.current)
			this.total = this.meeting.length
			this.old_meeting = this.meeting
		    this.time = JSON.parse(decodeURIComponent(options.data)).time
		},
		methods: {
			currentChangePage (list, currentPage) {
			      console.log('list', list)
			      let from = (currentPage - 1) * this.pageSize
			      let to = currentPage * this.pageSize
			      this.pageList  = []
			      for (; from < to; from++) {
			        if (list[from]) {
			          this.pageList.push(list[from])
			        }
			      }
			    },
			change(e) {
				console.log(e)
				this.current = e.current
				this.currentChangePage(this.meeting, this.current)
			},
			searchMeeingButton(){
				if(this.searchValue === ''){
					this.pageList = this.old_meeting
					this.total = this.old_meeting.length
				}else{
					// #ifdef H5
					uni.request({
						url:'/api/meeting/getMeetingByBuilding?building='+this.searchValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data	
								this.total = res.data.total
								this.currentChangePage(this.meeting,1)
							}
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.request({
						url:'http://localhost:8080/meeting/getMeetingByBuilding?building='+this.searchValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data
										this.total = res.data.total
										this.currentChangePage(this.meeting,this.current)
							}
						}
					})
					// #endif
				}
			},
			choseMeeting(item){
				let data={
					id:item,
					time :this.time
				}
				uni.navigateTo({
					url:"../meetingInfo/meetingInfo?data="+encodeURIComponent(JSON.stringify(data))
				})
				

			}
		}
	}
</script>

<style>
.u-page{
	display: flex;
	flex-direction: column;
}
.meeting{
	height: 100rpx;
	border:1px solid #dddddd;
	border-radius: 10rpx;
	margin: 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #01f716;
}
.meeting .room{
	margin-left: 210rpx;
}
.meeting .building{
}
.meeting_item{
	display: inline-flex;
	font-size: 4rpx;
	width: 160rpx;
}
.image{
	opacity: 0.7;
	height: 100rpx;
	width: 80rpx;
}
</style>
